<!-- 首页 -->
<template>
  <view class="home-wrap u-m-b-20">
    <!-- 空白页 -->
    <u-no-network @retry="init"></u-no-network>
    <shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
    </shopro-empty>

    <view v-else-if="isConnected && isRefresh" class="content-box">
      <!-- 导航栏 -->
      <home-head :isScorll="isScorll" borderRadius="0" :navTitle="appName" :list="headSwiperList"></home-head>
      <!-- 自定义模块 -->
      <view class="template-box">
        <!-- <block v-for="(item, index) in cartList" :key="item.id"> -->
        <!-- 轮播 -->
        <!-- <sh-banner
						v-if="item.type === 'banner' && index !== 0"
						:Px="item.content.x"
						:Py="item.content.y"
						:borderRadius="item.content.radius"
						:height="item.content.height"
						:list="item.content.list"
					></sh-banner> -->

        <!-- 搜索 -->
        <!-- <sh-search v-if="item.type === 'search'"></sh-search> -->

        <!-- 滑动宫格 -->
        <sh-grid-swiper :list="cartList.cate"></sh-grid-swiper>
        <view class="recommend">
          为你推荐
        </view>
        <!-- 推荐商品 -->
        <sh-hot-goods ref="det" :detail="cartList.detail"></sh-hot-goods>
        <!-- 广告魔方 -->
        <!-- <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv> -->
        <!-- 优惠券 -->
        <!-- <sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon> -->
        <!-- 秒杀-->
        <!-- <sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill> -->
        <!-- 拼购 -->
        <!-- <sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon> -->
        <!-- 富文本 -->
        <!-- <sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext> -->
        <!-- 功能列表 -->
        <!-- <sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell> -->
        <!-- 九宫格列表 -->
        <!-- <sh-grid v-if="item.type === 'grid-list'" :detail="item.content.list"></sh-grid> -->
        <!-- 功能标题 -->
        <!-- <sh-title-card v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card> -->
        <!-- 钱包 -->
        <!-- <sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet> -->
        <!-- 订单卡片 -->
        <!-- <sh-order-card v-if="item.type === 'order-card'"></sh-order-card> -->
        <!-- 直播 -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- <sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live> -->
        <!-- #endif -->

        <!-- </block> -->
      </view>
      <!-- 积分商品倒计时 -->
      <!-- <view class="time">
				<span> 距结束 </span>
				<u-count-down :timestamp="86400" separator="colon" 
				 bg-color="#F9A81F" color="white"
				 font-size="24"
				 height="42"
				 separator-size="36"
				 separator-color="#606266">
				</u-count-down>
				<button type="default" @tap="$Router.push('/pages/index/goods')">进入商品</button>
			</view> -->




      <!-- 分类选项卡 -->
      <!-- <sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs> -->
      <!-- 登录提示 -->
      <shopro-auth-modal></shopro-auth-modal>
      <!-- 悬浮按钮 -->
      <!-- <shopro-float-btn></shopro-float-btn> -->
      <!-- 连续弹窗提醒 -->
      <!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
      <!-- 隐私协议 -->
      <!-- #ifdef APP-PLUS -->
      <privacy-modal v-if="shopInfo && shopInfo.name" v-model="showPrivacy"></privacy-modal>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  import shBanner from './components/sh-banner.vue';
  import shGridSwiper from './components/sh-grid-swiper.vue';
  import shHotGoods from './components/sh-hot-goods.vue';
  import shAdv from './components/sh-adv.vue';
  import shCoupon from './components/sh-coupon.vue';
  import shSeckill from './components/sh-seckill.vue';
  import shGroupon from './components/sh-groupon.vue';
  import shRichtext from './components/sh-richtext.vue';
  import shCell from './components/sh-cell.vue';
  import shGrid from './components/sh-grid.vue';
  import shTitleCard from './components/sh-title-card.vue';
  import shOrderCard from './components/sh-order-card.vue';
  import shWallet from './components/sh-wallet.vue';
  import shSearch from './components/sh-search.vue';
  import shCategoryTabs from './components/sh-category-tabs.vue';
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';

  import privacyModal from './index/privacy-modal.vue';
  import homeHead from './index/home-head.vue';

  // #ifdef MP-WEIXIN
  import {
    HAS_LIVE
  } from '@/env';
  import shLive from './components/sh-live.vue';
  // #endif

  // #ifdef H5
  let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
  let handle = function(e) {
    e.preventDefault();
  };
  // #endif

  export default {
    components: {
      shBanner,
      shGridSwiper,
      shGroupon,
      shHotGoods,
      shAdv,
      shCoupon,
      shSeckill,
      shRichtext,
      shCell,
      shGrid,
      shTitleCard,
      shWallet,
      shOrderCard,
      shSearch,
      shCategoryTabs,

      privacyModal,
      homeHead,

      // #ifdef MP-WEIXIN
      shLive
      // #endif
    },
    data() {
      return {
        // #ifdef MP-WEIXIN
        HAS_LIVE: HAS_LIVE,
        // #endif
        isRefresh: true,
        enable: false, //是否开启吸顶。
        isConnected: true, //是否有网
        showPrivacy: false, //协议
        isScorll: false
      };
    },
    computed: {
      ...mapState({
        config: ({
          shopro
        }) => shopro.config,
        shopInfo: ({
          shopro
        }) => shopro.config?.shop,
        isLogin: ({
          user
        }) => user.isLogin,
        homeTemplate: ({
          shopro
        }) => shopro.template,
        hasTemplate: ({
          shopro
        }) => shopro.hasTemplate,
        cartList: ({
          cart
        }) => cart.cartList
      }),
      // 项目标题
      appName() {
        if (this.config?.shop) {
          return this.config?.shop?.name;
        }
      },
      // 头部模块数据
      headSwiperList() {
        // if (this.homeTemplate?.length) {
        // 	return this.homeTemplate[0]?.content?.list;
        // }
        console.log(this.homeTemplate, '=========')
        return this.homeTemplate.lunbo;
        // return this.homeTemplate.lunbo;
      },
      //分类选项卡数据
      categoryTabsData() {
        if (this.homeTemplate?.length) {
          return this.homeTemplate[this.homeTemplate.length - 1]?.content;
        }
      }
    },
    onPullDownRefresh() {
      this.init();
      this.$refs.det.getGoodsList();
    },
    onPageScroll(e) {
      this.isScorll = e.scrollTop > 100 ? true : false;
    },
    onShow() {
      let that = this;
      this.enable = true;
      this.getCartList();
      // #ifdef APP-VUE
      // 网络变化检测
      uni.onNetworkStatusChange(res => {
        this.isConnected = res.isConnected;
      });
      uni.getNetworkType({
        success: res => {
          res.networkType == 'none' ? (this.isConnected = false) : (this.isConnected = true);
        }
      });
      // #endif
    },
    onHide() {
      this.enable = false;
    },
    onLoad() {
      // #ifdef APP-VUE
      // app隐私协议弹窗
      if (!plus.runtime.isAgreePrivacy()) {
        this.showPrivacy = true;
        this.showNoticeModal = false;
      }
      // #endif
    },
    methods: {
      ...mapActions(['appInit', 'getTemplate', 'getCartList']),
      jweixin() {
        this.$wxsdk.openLocation();
      },
      // 初始化
      init() {
        this.isRefresh = false;
        return Promise.all([this.getTemplate()]).then(() => {
          uni.stopPullDownRefresh();
          this.isRefresh = true;
        });
      },


    }
  };
</script>

<style lang="scss" scoped>
  .time {
    background-color: white;
    padding: 50rpx 30rpx;
    overflow: hidden;

    span {
      padding-right: 30rpx;
      font-weight: bold;
      // padding-top:50rpx;
    }

    button {
      width: 156rpx;
      height: 50rpx;
      background: #F9A81F;
      border-radius: 50rpx;
      float: right;
      font-size: 24rpx;
      line-height: 50rpx;
      color: #FFFFFF;
    }
  }


  .recommend {
    text-align: center;
    padding: 10rpx 0;
    font-size: 36rpx;
    font-weight: bold;
  }
</style>
